<template lang="pug">
  .page.graphic-frame(v-if='data')
    .graphic-frame-wrap
      HeadBar(:title="data.title", @closeBar="data = null")
      scroll.scroll(ref="scrollWrap", :data='[getContents]')
        .scroll-wrap
          p.ql-editor(v-html="getContents" ref="wrap"  @click="imgScale($event)")

        .audioWrap(v-if="data.audio_file")
          audio(ref="audioControl" :src="data.audio_file", autoplay, loop, controls)
          .playBtn
            span 图文解说：
            i.el-icon-video-pause(@click="controlPlay" ref="iElem")
      ImgPreview(:url.sync="imgPreUrl" v-if="imgPreUrl")

</template>

<script>
import Scroll from '@/components/Scroll'
import headBarMixin from '@/mixins/headBar'
import ImgPreview from '@/components/ImgPreview'

export default {
  name: 'graphicApp',
  mixins: [headBarMixin],
  data() {
    return {
      isShow: false,
      imgPreUrl: '',
      data: null,
      title: '',
      content: null,
      audioState: true,
    }
  },
  mounted() {
    this.$vgo.on('modal:graphic', data => {
      this.data = data
      this.title = data.title
      this.isShow = true
      // this.$bar.finish()
    })
  },
  computed: {
    getContents() {
      if (this.data) {
        return this.data.contents
      }
    },
  },
  methods: {
    closePreview() {
      this.imgPreUrl = ''
    },
    imgScale(e) {
      let flag = false
      if (e.path) {
        let arr = e.path.slice(0, e.path.length - 4)
        flag = arr.some(i => i.localName.toLowerCase() === 'a')
      }
      if (flag) return
      // 点击事件重复 scroll插件影响
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        if (e.target.localName.toLowerCase() === 'img')
          this.imgPreUrl = e.target.src
        clearTimeout(this.timer)
        this.timer = null
      }, 100)
    },
    controlPlay(event) {
      let oI = this.$refs.iElem
      if (this.audioState) {
        oI.classList.add('el-icon-video-play')
        oI.classList.remove('el-icon-video-pause')
        this.$refs.audioControl.pause()
      } else {
        oI.classList.add('el-icon-video-pause')
        oI.classList.remove('el-icon-video-play')
        this.$refs.audioControl.play()
      }
      this.audioState = !this.audioState
    },
  },
  components: {
    Scroll,
    ImgPreview,
  },
}
</script>

<style lang="stylus">
@import '../../../assets/styles/mixin.styl';

.graphic-frame {
  .graphic-frame-wrap {
    full-cover();
    background-color: #f9f9f9;
  }

  .scroll {
    position: absolute;
    top: 40px;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    background-color: #fff;

    .scroll-wrap {
      position: relative;
      padding-top: 0;
    }

    p {
      padding-bottom: 5px;
    }

    img {
      max-width: 100%;
    }
  }

  .audioWrap {
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0px;
    height: 58px;
    padding: 0 20px;
    background-color: #3c3c3c;
    box-shadow: 0px 1px 5px #3c3c3c;

    audio {
      display: none;
    }

    .playBtn {
      display: inline-block;
      margin-bottom: 20px;
      margin-top: 10px;
      color: #c4c3c3;

      span {
        vertical-align: 8px;
        font-size: 16px;
      }

      i {
        font-size: 38px;
        cursor: pointer;
      }
    }
  }
}
</style>
